<template>
	<div class="card__body-container layout-padding">
		<div v-auth="'/admin/index_statistics'" style="overflow: auto; flex: 1">
			<div class="headline-icon">
				<div class="headline">订单数</div>
				<!-- <SvgIcon name="dht-iconfont dht-icon-tongji3" :size="18" title="统计" /> -->
			</div>
			<el-row :gutter="10" class="home-card-one mb15">
				<el-col
					:xs="24"
					:sm="12"
					:md="12"
					:lg="8"
					:xl="4"
					v-for="(item, index) in state.orderNumStatistics"
					:key="index"
					class="mb10"
					:class="{ 'home-media home-media-lg': index > 1, 'home-media-sm': index === 1 }"
				>
					<div class="home-card-item flex">
						<div class="flex-margin flex w100" :class="` home-one-animation${index}`">
							<div class="flex-auto">
								<el-statistic :value="item.num" />
								<div class="mt10">{{ item.title }}</div>
							</div>
							<div class="home-card-item-icon flex" :style="{ backgroundColor: item.color }">
								<SvgIcon name="dht-iconfont dht-icon-tongji3" :size="32" color="#999999" title="统计" />
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<div class="headline-icon">
				<div class="headline">订单金额</div>
				<!-- <SvgIcon name="dht-iconfont dht-icon-tongji3" :size="18" title="统计" /> -->
			</div>
			<el-row :gutter="10" class="home-card-one mb15">
				<el-col
					:xs="24"
					:sm="12"
					:md="12"
					:lg="8"
					:xl="4"
					v-for="(item, index) in state.orderAmtStatistics"
					:key="index"
					class="mb10"
					:class="{ 'home-media home-media-lg': index > 1, 'home-media-sm': index === 1 }"
				>
					<div class="home-card-item flex">
						<div class="flex-margin flex w100" :class="` home-one-animation${index}`">
							<div class="flex-auto">
								<el-statistic :value="item.num" />
								<div class="mt10">{{ item.title }}</div>
							</div>
							<div class="home-card-item-icon flex" :style="{ backgroundColor: item.color }">
								<SvgIcon name="dht-iconfont dht-icon-tongji3" :size="32" color="#999999" title="统计" />
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<div class="headline-icon">
				<div class="headline">平台服务费</div>
				<!-- <SvgIcon name="dht-iconfont dht-icon-tongji3" :size="18" title="统计" /> -->
			</div>
			<el-row :gutter="10" class="home-card-one mb15">
				<el-col
					:xs="24"
					:sm="12"
					:md="12"
					:lg="8"
					:xl="4"
					v-for="(item, index) in state.serviceAmtStatistics"
					:key="index"
					class="mb10"
					:class="{ 'home-media home-media-lg': index > 1, 'home-media-sm': index === 1 }"
				>
					<div class="home-card-item flex">
						<div class="flex-margin flex w100" :class="` home-one-animation${index}`">
							<div class="flex-auto">
								<el-statistic :value="item.num" />
								<div class="mt10">{{ item.title }}</div>
							</div>
							<div class="home-card-item-icon flex" :style="{ backgroundColor: item.color }">
								<SvgIcon name="dht-iconfont dht-icon-tongji3" :size="32" color="#999999" title="统计" />
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<div class="headline-icon">
				<div class="headline">新增铜牌用户</div>
				<!-- <SvgIcon name="dht-iconfont dht-icon-tongji3" :size="18" title="统计" /> -->
			</div>
			<el-row :gutter="10" class="home-card-one mb15">
				<el-col
					:xs="24"
					:sm="12"
					:md="12"
					:lg="8"
					:xl="4"
					v-for="(item, index) in state.newOneNumStatistics"
					:key="index"
					class="mb10"
					:class="{ 'home-media home-media-lg': index > 1, 'home-media-sm': index === 1 }"
				>
					<div class="home-card-item flex">
						<div class="flex-margin flex w100" :class="` home-one-animation${index}`">
							<div class="flex-auto">
								<el-statistic :value="item.num" />
								<div class="mt10">{{ item.title }}</div>
							</div>
							<div class="home-card-item-icon flex" :style="{ backgroundColor: item.color }">
								<SvgIcon name="dht-iconfont dht-icon-tongji3" :size="32" color="#999999" title="统计" />
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<div class="headline-icon">
				<div class="headline">新增粉丝用户</div>
				<!-- <SvgIcon name="dht-iconfont dht-icon-tongji3" :size="18" title="统计" /> -->
			</div>
			<el-row :gutter="10" class="home-card-one mb15">
				<el-col
					:xs="24"
					:sm="12"
					:md="12"
					:lg="8"
					:xl="4"
					v-for="(item, index) in state.newRegisterNumStatistics"
					:key="index"
					class="mb10"
					:class="{ 'home-media home-media-lg': index > 1, 'home-media-sm': index === 1 }"
				>
					<div class="home-card-item flex">
						<div class="flex-margin flex w100" :class="` home-one-animation${index}`">
							<div class="flex-auto">
								<el-statistic :value="item.num" />
								<div class="mt10">{{ item.title }}</div>
							</div>
							<div class="home-card-item-icon flex" :style="{ backgroundColor: item.color }">
								<SvgIcon name="dht-iconfont dht-icon-tongji3" :size="32" color="#999999" title="统计" />
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts" name="home">
import { onMounted, reactive } from 'vue';
import { statisticsApi } from '/@/api';
import { auth } from '/@/utils/authFunction';

const StatisticsApi = statisticsApi();

const state = reactive({
	indexStatistics: {},
	orderNumStatistics: [] as any,
	orderAmtStatistics: [] as any,
	serviceAmtStatistics: [] as any,
	newOneNumStatistics: [] as any,
	newRegisterNumStatistics: [] as any,
});

onMounted(() => {
	auth('/admin/index_statistics') && _indexStatistics();
});

/********** 网络事件 **********/
// 首页统计信息
const _indexStatistics = () => {
	StatisticsApi.indexStatistics()
		.then((res: any) => {
			const info = res.data.info;
			state.orderNumStatistics = [
				{
					num: info.jinri_order_num,
					title: '今日订单数',
					color: 'rgba(245, 241, 211,0.5)',
				},
				{
					num: info.zuori_order_num,
					title: '昨日订单数',
					color: 'rgba(231, 232, 227,0.5)',
				},
				{
					num: info.benyue_order_num,
					title: '本月订单数',
					color: 'rgba(120, 80, 71,0.5)',
				},
				{
					num: info.shangyue_order_num,
					title: '上月订单数',
					color: 'rgba(214, 214, 184,0.5)',
				},
				{
					num: info.bennian_order_num,
					title: '本年订单数',
					color: 'rgba(168, 168, 167,0.5)',
				},
				{
					num: info.leiji_order_num,
					title: '累计订单数',
					color: 'rgba(232, 227, 211,0.5)',
				},
			];
			state.orderAmtStatistics = [
				{
					num: info.jinri_order_amt,
					title: '今日订单金额',
					color: 'rgba(245, 241, 211,0.5)',
				},
				{
					num: info.zuori_order_amt,
					title: '昨日订单金额',
					color: 'rgba(231, 232, 227,0.5)',
				},
				{
					num: info.benyue_order_amt,
					title: '本月订单金额',
					color: 'rgba(120, 80, 71,0.5)',
				},
				{
					num: info.shangyue_order_amt,
					title: '上月订单金额',
					color: 'rgba(214, 214, 184,0.5)',
				},
				{
					num: info.bennian_order_amt,
					title: '本年订单金额',
					color: 'rgba(168, 168, 167,0.5)',
				},
				{
					num: info.leiji_order_amt,
					title: '累计订单金额',
					color: 'rgba(232, 227, 211,0.5)',
				},
			];
			state.serviceAmtStatistics = [
				{
					num: info.jinri_service_amt,
					title: '今日平台服务费',
					color: 'rgba(245, 241, 211,0.5)',
				},
				{
					num: info.zuori_service_amt,
					title: '昨日平台服务费',
					color: 'rgba(231, 232, 227,0.5)',
				},
				{
					num: info.benyue_service_amt,
					title: '本月平台服务费',
					color: 'rgba(120, 80, 71,0.5)',
				},
				{
					num: info.shangyue_service_amt,
					title: '上月平台服务费',
					color: 'rgba(214, 214, 184,0.5)',
				},
				{
					num: info.bennian_service_amt,
					title: '本年平台服务费',
					color: 'rgba(168, 168, 167,0.5)',
				},
				{
					num: info.leiji_service_amt,
					title: '累计平台服务费',
					color: 'rgba(232, 227, 211,0.5)',
				},
			];
			state.newOneNumStatistics = [
				{
					num: info.jinri_new_one_num,
					title: '今日新增铜牌用户',
					color: 'rgba(245, 241, 211,0.5)',
				},
				{
					num: info.zuori_new_one_num,
					title: '昨日新增铜牌用户',
					color: 'rgba(231, 232, 227,0.5)',
				},
				{
					num: info.benyue_new_one_num,
					title: '本月新增铜牌用户',
					color: 'rgba(120, 80, 71,0.5)',
				},
				{
					num: info.shangyue_new_one_num,
					title: '上月新增铜牌用户',
					color: 'rgba(214, 214, 184,0.5)',
				},
				{
					num: info.bennian_new_one_num,
					title: '本年新增铜牌用户',
					color: 'rgba(168, 168, 167,0.5)',
				},
				{
					num: info.leiji_new_one_num,
					title: '累计新增铜牌用户',
					color: 'rgba(232, 227, 211,0.5)',
				},
			];
			state.newRegisterNumStatistics = [
				{
					num: info.jinri_new_register_num,
					title: '今日新增粉丝用户',
					color: 'rgba(245, 241, 211,0.5)',
				},
				{
					num: info.zuori_new_register_num,
					title: '昨日新增粉丝用户',
					color: 'rgba(231, 232, 227,0.5)',
				},
				{
					num: info.benyue_new_register_num,
					title: '本月新增粉丝用户',
					color: 'rgba(120, 80, 71,0.5)',
				},
				{
					num: info.shangyue_new_register_num,
					title: '上月新增粉丝用户',
					color: 'rgba(214, 214, 184,0.5)',
				},
				{
					num: info.bennian_new_register_num,
					title: '本年新增粉丝用户',
					color: 'rgba(168, 168, 167,0.5)',
				},
				{
					num: info.leiji_new_register_num,
					title: '累计新增粉丝用户',
					color: 'rgba(232, 227, 211,0.5)',
				},
			];
		})
		.catch(() => {});
};
</script>

<style lang="scss">
.headline-icon {
	display: flex;
	align-items: center;
	padding: 10px;
	.headline {
		margin-right: 20px;
		font-size: 18px;
		font-weight: bold;
	}
}
.home-card-one {
	@for $i from 0 through 5 {
		.home-one-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/6) + s;
		}
	}
	.home-card-item {
		width: 100%;
		height: 130px;
		border-radius: 4px;
		transition: all ease 0.3s;
		padding: 20px;
		overflow: hidden;
		background: var(--el-color-white);
		color: var(--el-text-color-primary);
		border: 1px solid var(--next-border-color-light);
		&:hover {
			box-shadow: 0 2px 12px var(--next-color-dark-hover);
			transition: all ease 0.3s;
		}
		&-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 70px;
			height: 70px;
			border-radius: 50%;
			flex-shrink: 1;
			i {
				color: var(--el-text-color-placeholder);
			}
		}
		&-title {
			font-size: 15px;
			font-weight: bold;
			height: 30px;
		}
	}

	.el-statistic__number {
		font-size: 30px !important;
	}
}
</style>
